<!--1.定义这个组件的统一模板，包含组件的HTML片段
 要求！只能有一个唯一的父元素包裹当前组件的HTML片段 -->
<template>
	<div v-if="isShow">
		<button @click="change(-1)">-</button>
		<span>{{ count }}</span>
		<button @click="change(+1)">+</button>
	</div>
</template>

<script>
export default {
	//2. 定义data()函数，可返回一个新的数据对象
	data() {
		return {
			//相当于以前new Vue()中的data{}
			//定义组件模板中需要的一个变量count
			count: 0,
			isShow : true,
			timer: null,
		};
	},
	
	created(){
		// 循环定时器，不停歇，每过一段时间time，执行一次。
		this.timer = setInterval(()=>{
			this.count +=1;
			console.log(this.count)
		},500);
	},
	
	// mounted(){
	// 	this.count = 5;
	// },
	
	//3. 之后的内容和new Vue()中就完全一样了
	methods: {
		change(i) {
			this.count += i;
			this.count < 0 && (this.count = 0);
		}
	},

	watch: {
		//监视函数
		count(newValue){
			// console.log(newValue)
			if(newValue > 10 ){
				//组件自动消失
				this.isShow = false;
				//清除定时器
				clearInterval(this.timer);
			}
			
		}
	},

	computed: {
		//计算属性
	}
};
</script>

<!-- 样式暂时不考虑 -->
<style></style>
